<!--
  * 菜单 树形 下拉选择框
  *
  * @Author:    zhoujk
  * @Date:      2022-09-01 23:14:49
-->
<template>
  <a-tree-select
    :value="props.value"
    :treeData="treeData"
    :fieldNames="{ label: 'menuName', key: 'menuId', value: 'menuId' }"
    show-search
    tree-checkable
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="请选择菜单"
    allow-clear
    tree-default-expand-all
    @change="onSelectChange"
  />
</template>
<script setup>
  import { onMounted, ref } from 'vue'
  import _ from 'lodash'
  import { menuApi } from '/src/api/system/b-operation/menu-api'
  import { buildMenuTableTree } from '/src/views/system/b-operation/menu/menu-data-handler'
  import { ZZB_MENU_TYPE_ENUM } from '/src/constants/system/menu-const'

  const props = defineProps({
    // 绑定值
    value: Array,
    // 单选多选
    multiple: {
      type: Boolean,
      default: false,
    },
  })

  const emit = defineEmits(['update:value'])

  let treeData = ref([])
  onMounted(queryMenuTree)

  // 外部调用初始化
  let menuList = []
  async function queryMenuTree() {
    let res = await menuApi.queryMenu()
    menuList = res.data.filter(
      (e) => e.menuType === ZZB_MENU_TYPE_ENUM.MENU_TYPE_MENU.value || e.menuType === ZZB_MENU_TYPE_ENUM.MENU_TYPE_CATALOG.value,
    )
    for (const item of menuList) {
      if (item.menuType === ZZB_MENU_TYPE_ENUM.MENU_TYPE_CATALOG.value) {
        item.disabled = true
      }
    }
    treeData.value = buildMenuTableTree(menuList)
  }

  /**
   * 根据id集合，获取菜单集合
   */
  function getMenuListByIdList(menuIdList) {
    return _.cloneDeep(menuList.filter((e) => menuIdList.indexOf(e.menuId) > -1))
  }

  function onSelectChange(e) {
    emit('update:value', e)
  }

  // ----------------------- 以下是暴露的方法内容 ------------------------
  defineExpose({
    queryMenuTree,
    getMenuListByIdList,
  })
</script>
